<template>
	<u-popup @close="close" v-model="value" :popup="false" :mask-custom-style="{ background: 'rgba(0, 0, 0, .2)' }" border-radius="28" :safe-area-inset-bottom="true" mode="center">
		<view class="vip-content">
			<image class="popup-head" src="@/static/images/vip/vip-popup-head.png" mode="aspectFit"></image>
			<view class="popup-close" @tap="close"><u-icon name="close-circle" size="36" color="#fff" top="-4"></u-icon></view>
			<view class="vip-text">
				加入
				<text>VIP</text>
				开启聊天
			</view>
			<view class="vip-text" style="font-size: 24rpx;margin-bottom: 40rpx;">解锁聊天内容</view>
			<view class="vip-btn" @tap="toPage" data-url="/pageUser/vip/home">立即加入VIP</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	props: {
		value: {
			default: false,
			type: Boolean
		}
	},
	data() {
		return {};
	},
	methods: {
		close() {
			this.$emit('input', false);
		}
	}
};
</script>

<style lang="scss">
.vip-content {
	width: 400rpx;
	height: 400rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 28rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	.popup-head {
		width: 400rpx;
		height: 220rpx;
		position: absolute;
		top: 0;
	}
	.vip-btn {
		width: 210rpx;
		height: 52rpx;
		background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
		border-radius: 26rpx;
		margin-bottom: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
	.vip-text {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 13rpx;
		text {
			color: #feb650;
		}
	}
	.popup-close {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 26rpx;
		right: 26rpx;
		z-index: 4;
	}
}
</style>
